<template>
	<view class="content detail" v-if="loading">
		<!-- <topLogo></topLogo> -->
		<view class="wrap">
			<view class="dpname">
				<uni-icons type="shop-filled" size="18" class="dpicon"></uni-icons>{{company}}
			</view>
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400" indicator-active-color="#fff">
					<swiper-item class="swiper-item" v-for="(item,index) in bigImages" :key="index">
						<view class="image-wrapper">
							<image :src="$public.imgageUrl(item)" class="loaded" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="money-div">
				<view class="money redwz">
					<text class="small">￥</text>{{moneyValue.money}}
				</view>
				<view class="fanjf">
					<image src="/static/sj_sq_jf.png" mode="scaleToFill" class="image"></image> 返<text
						class="redzi">{{moneyValue.fanJf}}</text>积分
				</view>
			</view>
			<view class="title">
				{{detailData.title}}
			</view>
			<jxwTitle title="套餐内容"></jxwTitle>
			<view class="taocan">
				<view class="taocan-list" v-for="(item,index) in modelValue" :key="index">
					<!-- <view class="xian"></view> -->
					<view class="left">
						{{item.name}}
					</view>
					<view class="right">
						{{item.weight}}
					</view>
				</view>
			</view>
			<view class="wxtswz redwz" v-if="detailData.remark">
				温馨提示：{{detailData.remark}}
			</view>
			<jxwTitle title="使用流程"></jxwTitle>
			<view class="mianfeiling">
				<view class="mf-flex">
					<view class="shuzi">
						1
					</view>
					<image src="../../static/sj_jw_imgjt.png" mode="scaleToFill" class="img2"></image>
					<view class="shuzi">
						2
					</view>
					<image src="../../static/sj_jw_imgjt.png" mode="scaleToFill" class="img2"></image>
					<view class="shuzi">
						3
					</view>
				</view>
				<view class="mf-flex mf-xia">
					<view class="wz-div left">
						前往门店
					</view>
					<view class="wz-div">
						出示二维码
					</view>
					<view class="wz-div right">
						给店员扫码核销
					</view>
				</view>
			</view>
			<jxwTitle title="图文详情"></jxwTitle>
			<view class="detail-desc">
				<rich-text :nodes="detailData.content"></rich-text>
			</view>
		</view>


		<view class="page-bottom">
			<view class="page-bottom-l">
				<view class="p-b-btn" @click="$public.navto('/pages/index/map',{lat:point[0],lng:point[1]})">
					<!-- <uni-icons type="home" size="24"></uni-icons> -->
					<image src="../../static/sj_dw.png" mode="scaleToFill" class="navimage"></image>
					<text>导航</text>
				</view>

			</view>

			<view class="action-btn-group">
				<!-- <button type="primary" class=" action-btn  no-border add-cart-btn"
					@click="buttonClick({index:0})">加入购物车</button> -->
				<button type="primary" class="btncss" @click="createOrder">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: 21,
				detailData: {
					title: "",
					content: ""
				},
				company: "店铺名称",
				typeId: 3,
				loading: false,
				bigImages: [],
				moneyValue: {},
				modelValue: [],
				point: []
			}
		},
		onLoad(options) {
			this.$public.showLoading()
			console.log("options", options)
			if (options.productId)
				this.productId = options.productId
			if (options.company)
				this.company = decodeURIComponent(options.company)
			if (options.point) {
				// console.log(decodeURIComponent(options.point))
				this.point = decodeURIComponent(options.point).split(",")
			}

			// this.getCollectionDetail()
			// this.getCartList()
		},
		onShow() {
			if (this.$public.isLoginUrl())
				this.getProductDetail()
		},
		methods: {
			openMap() {
				// console.log("openMap")
				let that = this
				uni.chooseLocation({
					latitude: this.point[0],
					longitude: this.point[1],
					success: function(res) {
						// that.data.bak1 = res.latitude + "," + res.longitude
					},
					fail: function(res) {
						console.log("res", res);
					}
				});
			},
			getProductDetail() {
				let that = this

				uni.request({
					url: this.baseUrl + "/api/getProductDetail",
					data: {
						productId: that.productId
					},
					success(e) {
						console.log("getProductDetail", e)
						let data = e.data;
						if (data.code == 0) {
							data.data.content = that.$public.formatRichText(data.data.content.replace(new RegExp(
									"/profile/upload/", "g"), that
								.baseUrl +
								"/profile/upload/"))
							that.detailData = data.data
							that.bigImages = data.data.bigImage.split(",")
							that.modelValue = JSON.parse(that.detailData.model)
							that.moneyValue = JSON.parse(that.detailData.referenceMoney)

							that.loading = true
							uni.hideLoading();
							// that.showModelSelect();
						}

					}
				})
			},
			async buttonClick(e) {
				let goodsData = [{
					productId: this.productId,
					num: 1,
					model: "1-1",
					params: {
						product: {
							productId: this.detailData.productId,
							title: this.detailData.title
						}
					},
					image: this.detailData.smallImage,
					attr_val: "无",
					price: 0,
					stock: 100,
					cartId: 0,
					money: this.moneyValue.money,
					typeId: this.typeId
				}]
				this.$public.navto(`/pages/order/createOrder`, {
					data: JSON.stringify({
						goodsData: goodsData
					})
				})
				// } else {
				// 	this.addBuyCart()
				// }
			},
			createOrder() {
				let json = [{
					cartId: 0,
					productId: this.productId,
					model: "1-1",
					num: 1,
					image: this.detailData.smallImage,
					attr_val: "无",
					price: 0,
					title: this.detailData.title,
					typeId: this.typeId,
					money: this.moneyValue.money,

				}]

				this.$public.htmlPost("/api/addOrder", {
					json: JSON.stringify(json),
					integral: 0,
					money: this.moneyValue.money,
					remark: "",
					typeId: this.typeId,
					productId: this.productId
				}).then((res) => {
					console.log("创建订单", res)
					let {
						code,
						data
					} = res.data
					if (code == 0) {
						this.openPay(data.orderId)
					}
				})
			},
			//开始支付
			async openPay(orderId) {
				let that = this
				this.$public.htmlPost("/api/maCreateOrder", {
					orderId: orderId
				}).then((res) => {
					console.log("获取订单数据", res)
					if (res.data.code == 0) {
						let {
							code
						} = res.data.data
						console.log("res.data.timestamp", res.data.timestamp)
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: res.data.data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.data.nonceStr, // 随机字符串
							package: res.data.data.package, // 固定值
							signType: res.data.data.signType, //固定值
							paySign: res.data.data.paySign, //签名
							success: function(res) {
								console.log("success", res);
								// console.log("支付成功");
								that.$public.reLaunch("/pages/order/paySuccess", {
									orderId: that.orderId,
									type: that.payType,
									code: code,
									money: that.moneyTotal,
									price: that.total,
									typeId: that.typeId
								})
							},
							fail: function(err) {
								// console.log("fail", {
								// 	orderId: that.orderId,
								// 	type: that.payType,
								// 	code: code,
								// 	money: that.moneyTotal,
								// 	price: that.total,
								// 	typeId: that.typeId
								// });
								// console.log("支付失败");
								// that.$public.reLaunch("/pages/order/paySuccess", {
								// 	orderId: that.orderId,
								// 	type: that.payType,
								// 	code: code,
								// 	money: that.moneyTotal,
								// 	price: that.total,
								// 	typeId: that.typeId
								// })
							}
						});
					} else {
						this.$api.msg(res.data.msg)
					}

				})


			},
			stopPrevent() {},

		},
	}
</script>

<style lang="scss" scoped>
	.detail {
		// background: #f5f5f5;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.dpname {

			font-size: 28rpx;
			color: #666666;
			padding: 40rpx 0 24rpx;
			display: flex;
			align-items: center;

			.dpicon {
				margin-right: 5rpx;
			}
		}

		.mian-top-bg {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 100%);

			border-radius: 40rpx 40rpx 0rpx 0rpx;
			height: 30rpx;
			width: 100%;
			margin-top: -30rpx;
			position: relative;
			z-index: 10;
		}

		.carousel {
			height: 390rpx;
			position: relative;

			// overflow: hidden;

			swiper {
				height: 100%;
			}

			.image-wrapper {
				width: 100%;
				height: 100%;

			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				height: 390rpx;
				overflow: hidden;

				.loaded {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

		}


		.redwz {
			color: #DF686A;
		}

		.money-div {
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			.money {
				font-size: 48rpx;

				.small {
					font-size: 24rpx;
				}
			}

			.fanjf {

				font-size: 26rpx;
				color: #666666;
				display: flex;
				align-items: center;
				margin-left: 16rpx;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 15rpx;
				}
			}
		}

		.title {
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
			margin-bottom: 48rpx;
		}

		.taocan {
			.taocan-list {
				position: relative;
				width: 100%;
				height: 40rpx;
				margin-bottom: 30rpx;

				.xian {
					height: 0;
					border-bottom: 1px dashed #999999;
					padding: 15rpx 0 0;
					line-height: 0;
					font-size: 0;
				}

				.left {
					position: absolute;
					left: 0;
					top: 0;
					background: #fff;
					color: #666666;
					line-height: 35rpx;
					font-size: 30rpx;
					height: 35rpx;
					padding-right: 20rpx;
				}

				.right {
					position: absolute;
					right: 0;
					top: 0;
					background: #fff;
					color: #333333;
					line-height: 35rpx;
					font-size: 30rpx;
					height: 35rpx;
					padding-left: 20rpx;
				}
			}

		}

		.wxtswz {
			font-size: 30rpx;
			margin-bottom: 48rpx;
		}

		.mianfeiling {
			height: auto;
			display: block;
			padding: 40rpx 0;

			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.mf-flex {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				padding: 0 30rpx;

				.shuzi {
					width: 112rpx;
					height: 112rpx;
					background: linear-gradient(135deg, #DF686A 0%, #EE8D56 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					color: #fff;
					font-size: 48rpx;
				}

				.img1 {
					width: 112rpx;
					height: 112rpx;
				}

				.img2 {
					width: 81rpx;
					height: 15rpx;
				}

				&.mf-xia {
					justify-content: space-between;
					margin-top: 16rpx;
					padding: 0;
				}

				.wz-div {
					width: 200rpx;
					color: #666666;
					font-size: 28rpx;
					text-align: center;

					// &.left {
					// 	text-align: left;
					// 	padding-left: 15rpx;
					// }

					&.right {
						text-align: right;
					}
				}
			}




		}


		/*  详情 */
		.detail-desc {
			background: #fff;
			// margin-top: 16upx;
			padding: 20rpx 0 150rpx;
			margin-bottom: 140rpx;



		}




		.page-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 140rpx;
			background: #f7f7f7;

			.navimage {
				width: 36rpx;
				height: 34rpx;
			}

			.page-bottom-l {
				display: flex;
			}

			// box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
			// border-radius: 16upx;
			uni-button {

				&.p-b-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: $font-sm;
					color: $font-color-base;
					width: 96upx;
					height: 100rpx;
					margin: 0;
					padding: 0;
					line-height: 1.8;
					background: none;
				}

				&:after {
					display: none;
				}
			}

			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				color: $font-color-base;
				width: 96upx;
				height: 100rpx;
				margin: 0;
				padding: 0;
				line-height: 1.6;
				background: none;

				&:after {
					display: none;
				}

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;

					&.yituuu {
						margin-top: 10upx;
						line-height: 36upx;
					}
				}

				&.active,
				&.active .yticon {
					color: $uni-color-primary;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.action-btn-group {
				display: flex;
				width: 552rpx;
				height: 88rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-left: 20upx;

				// position: relative;
				.btncss {
					height: 88rpx;

				}
			}
		}
	}
</style>